<div class="box-canvas">
	<div class="cube">
		<div class="side back" />
		<div class="side left" />
		<div class="side right" />
		<div class="side top" />
		<div class="side bottom" />
		<div class="side front" />
	</div>
</div>

<style>
	:root {
		--blue: #b5d1ec;
		--red: #f98690;
		--yellow: #f9f7b5;
		--orange: #f9d4bc;
		--white: #f8f8f8;
		--green: #b0e4d2;
		--in-between-color: #767c87;
	}

	.box-canvas {
		position: relative;
		margin: auto;
		height: 600;

		background: var(--background-color);
		perspective: 800px;
	}

	@keyframes rotateCube {
		0% {
			transform: rotateX(0) rotateY(0);
		}

		100% {
			transform: rotateX(360deg) rotateY(360deg);
		}
	}

	.cube {
		position: relative;
		margin: auto;
		margin-top: 150px;
		margin-bottom: 150px;
		width: 200px;
		height: 200px;
		transform-style: preserve-3d;
		animation: rotateCube 10s infinite;
	}

	.side {
		position: absolute;
		width: 200px;
		height: 200px;
	}

	.side::before {
		content: '';
		position: absolute;
		width: 200px;
		height: 200px;
		transform: rotate(90deg);
		background: repeating-linear-gradient(
			to right,
			var(--in-between-color) 0,
			var(--in-between-color) 2px,
			transparent 2px,
			transparent 66px,
			var(--in-between-color) 66px,
			var(--in-between-color) 68px,
			transparent 68px,
			transparent 132px,
			var(--in-between-color) 132px
		);
	}

	.back {
		transform: translateZ(-100px);
		background: repeating-linear-gradient(
			to right,
			var(--in-between-color) 0,
			var(--in-between-color) 2px,
			var(--blue) 2px,
			var(--blue) 66px,
			var(--in-between-color) 66px,
			var(--in-between-color) 68px,
			var(--blue) 68px,
			var(--blue) 132px,
			var(--in-between-color) 132px
		);
	}

	.left {
		transform: translateX(-100px) rotateY(90deg);
		background: repeating-linear-gradient(
			to right,
			var(--in-between-color) 0,
			var(--in-between-color) 2px,
			var(--yellow) 2px,
			var(--yellow) 66px,
			var(--in-between-color) 66px,
			var(--in-between-color) 68px,
			var(--yellow) 68px,
			var(--yellow) 132px,
			var(--in-between-color) 132px
		);
	}

	.right {
		transform: translateX(100px) rotateY(90deg);
		background: repeating-linear-gradient(
			to right,
			var(--in-between-color) 0,
			var(--in-between-color) 2px,
			var(--red) 2px,
			var(--red) 66px,
			var(--in-between-color) 66px,
			var(--in-between-color) 68px,
			var(--red) 68px,
			var(--red) 132px,
			var(--in-between-color) 132px
		);
	}

	.top {
		transform: translateY(-100px) rotateX(90deg);
		background: repeating-linear-gradient(
			to right,
			var(--in-between-color) 0,
			var(--in-between-color) 2px,
			var(--green) 2px,
			var(--green) 66px,
			var(--in-between-color) 66px,
			var(--in-between-color) 68px,
			var(--green) 68px,
			var(--green) 132px,
			var(--in-between-color) 132px
		);
	}

	.bottom {
		transform: translateY(100px) rotateX(90deg);
		background: repeating-linear-gradient(
			to right,
			var(--in-between-color) 0,
			var(--in-between-color) 2px,
			var(--white) 2px,
			var(--white) 66px,
			var(--in-between-color) 66px,
			var(--in-between-color) 68px,
			var(--white) 68px,
			var(--white) 132px,
			var(--in-between-color) 132px
		);
	}

	.front {
		transform: translateZ(100px);
		background: repeating-linear-gradient(
			to right,
			var(--in-between-color) 0,
			var(--in-between-color) 2px,
			var(--orange) 2px,
			var(--orange) 66px,
			var(--in-between-color) 66px,
			var(--in-between-color) 68px,
			var(--orange) 68px,
			var(--orange) 132px,
			var(--in-between-color) 132px
		);
	}
</style>
